<template>
  <div class="bgi" >
    <div class="bgi-item" v-for=" (item ,index) in chartsList" :key="index">
      <img src="../../../public/imgs/icon5.png" alt="">
      <div class="bgi-item-text">
        <div class="no-0"
        :class="[{ active: index <= 2 }]"

        >No. {{ index + 1}}</div>
        <div class="text" 
        :class="[{ active: index <= 2 }]"
        >检察官: {{ item.name }}</div>
        <div class="num" 
        :class="[{ active: index <= 2 }]"
        >案件数量:{{ item.value }} </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      chartsList: [],
    };
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
        try {
          const response = await this.$axios.get(
            "/api/screen/rankingProsecutorCases"
          );
          const data = response.data.data;
          this.chartsList = data.name.map((name, index) => ({
            value: data.value[index],
            name: name,
          }))
          console.log(this.chartsList);
          
        } catch (error) {
          console.error(error);
        }
      },
  },
};
</script>

<style scoped>
.bgi{
  width: 1200px ;
  height: 650px;
  display: flex;
  flex-wrap: wrap;
  .bgi-item{
    width: 301px;
    height: 100px;
    background-image: url("../../../public/imgs/info-text.png");
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    justify-content: flex-start;
    margin-left: 90px;
    img{
      margin: -10px 0 0 0;

      width: 114px;
      height: 88px;
    }
    .bgi-item-text{
      color: #fff;
      margin-top: 10px; 
      font-style: italic;
      font-size: 20px;
      .no-0{
        height: 20px;
        width: 180px;
        text-align: left;
      }
      .active{
        color: rgb(0, 241, 254) !important;

      }
      .text{
        height: 20px;
        width: 180px;
        text-align: left;
      }
      .num{
        height: 20px;
        width: 180px;
        text-align: left;
        margin-top: 3px;
      }
    }

  }


}
</style>
